<script setup lang="ts">
import closeImg from '@/assets/images/close.png'
import playImg from '@/assets/images/play.png'
const isVideoShow = defineModel()
const props = defineProps({
  url: {
    type: String,
    required: true
  },
});
</script>
<template>
  <transition name="fade">
    <img v-if="!isVideoShow" :src="playImg" class="float-center hover-hand hover-lucency" @click="isVideoShow = true"
      width="50px" />
    <div v-else class="blibli-video-container float-center hover-hand">
      <div class="img-container">
        <img :src="closeImg" width="18px" @click="isVideoShow = false">
      </div>
      <iframe :src="`https://player.bilibili.com/player.html?bvid=${props.url}&danmaku=0`" allowfullscreen
        scrolling="no" frameborder="0" high_quality="1" danmaku="0" width="100%" height="100%"
        sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts">
      </iframe>
    </div>
  </transition>
</template>
<style lang="scss" scoped>
.blibli-video-container {
  width: 700px;
  aspect-ratio: 16 / 9;

  .img-container {
    display: flex;
    justify-content: flex-end;
    cursor: pointer;

    img {
      margin: 0;
      transform: translateX(30px);
    }
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
